<template>
  <div class="scheduling-wrapper">
    <div class="currentDay">
      <span class="icon iconfont icongonggong_jiantou_zuo_16" @click="changeTime('reduceYear')"></span>
      <span class="icon iconfont icongonggong_jiantou_zuo_16" @click="changeTime('reduceMonth')"></span>
      <h1>{{ currentYear }}年{{ currentMonth }}月</h1>
      <span class="icon iconfont icongonggong_jiantou_you_16" @click="changeTime('addMonth')"></span>
      <span class="icon iconfont icongonggong_jiantou_you_16" @click="changeTime('addYear')"></span>
    </div>
    <div :class="conditionShow?'schedulingTitle-wrapper active':'schedulingTitle-wrapper'">
      <h1 @click="conditionShow = !conditionShow">XX电力公司安全管理中心</h1>
      <div class="condition-wrapper" v-if="conditionShow">
        <el-input class="systemInput" placeholder="请输入关键字"></el-input>
        <span class="businessButtonConfirm">查询</span>
      </div>
    </div>
    <div class="calendar-wrapper">
      <div v-for="day in weeks" :key="day" class="week">{{ day }}</div>
      <div :class="['day',`${dayId<=beginDay?'lastMonthDay':''}`,`${dayId>beginDay+maxDayNum?'nextMonthDay':''}`]"
           v-for="dayId in 42" :key="dayId">
        <span class="scheduleStatus">已排班</span>
        <span class="businessButtonCancel" @click="addSchedule">排班</span>
        <span class="icon iconfont iconbiaoge-shanchu"></span>
        <span class="date" v-if="dayId<=beginDay">{{ lastMaxDayNum - (beginDay - dayId) }}日</span>
        <span class="date" v-else-if="dayId > beginDay && (dayId - beginDay) <= maxDayNum">
          {{ dayId - beginDay }}日
        </span>
        <span class="date" v-else>{{ dayId - (maxDayNum + beginDay) }}日</span>
      </div>
    </div>
    <div class="businessMask" v-if="newScheduleShow">
      <div class="businessDialog" style="width: 829px;height: 874px">
        <div class="dialog-header" v-winmove>
          <span>新增排班</span>
        </div>
        <div class="dialog-body">
          <div class="row">
            <span class="systemButtonDelete">删除</span>
            <div class="order">排班一</div>
            <el-form class="scheduleDetail" ref="form" :model="scheduleDetail" label-width="70px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="开始时间">
                    <el-date-picker style="float: left"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="结束时间">
                    <el-date-picker style="float: left"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="值班长">
                <el-input style="float: left;width: 220px"></el-input>
              </el-form-item>
              <el-form-item label="值班人员">
                <el-input style="float: left;width: 220px"></el-input>
              </el-form-item>
              <el-form-item label="值班内容">
                <el-input type="textarea" :rows="6" maxlength="100" show-word-limit></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="dialog-footer">
          <span class="businessButtonConfirm">确定</span>
          <span class="businessButtonCancel" @click="newScheduleShow = false">取消</span>
          <!--          <span class="systemButtonAdd" style="float:right; margin-right: 10px">s</span>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import winmove from "@/directives/winmove";

export default {
  data() {
    return {
      weeks: ['日', '一', '二', '三', '四', '五', '六'],
      beginDay: null,
      maxDayNum: null,
      conditionShow: false,
      currentYear: null,
      currentMonth: null,
      scheduleDetail: {},
      newScheduleShow: false
    }
  },
  directives: {
    winmove,
  },
  created() {
    const yyyy = new Date().getFullYear()
    const MM = new Date().getMonth() + 1
    this.currentYear = yyyy
    this.currentMonth = MM
    this.formatTime(yyyy, MM)
  },
  methods: {
    formatTime(yyyy, MM) {
      const beginDay = new Date(yyyy, MM - 1, 1).getDay()
      const maxDayNum = new Date(yyyy, MM, 0).getDate()
      const lastMaxDayNum = new Date(yyyy, MM - 1, 0).getDate()
      this.beginDay = beginDay // 当前月的第一天，星期数
      this.maxDayNum = maxDayNum // 当前月天数
      this.lastMaxDayNum = lastMaxDayNum // 上一月天数
    },
    changeTime(value) {
      switch (value) {
        case 'reduceYear':
          this.currentYear = this.currentYear - 1
          this.formatTime(this.currentYear, this.currentMonth)
          break
        case 'reduceMonth':
          if (this.currentMonth === 1) {
            this.currentYear = this.currentYear - 1
            this.currentMonth = 12
          } else {
            this.currentMonth = this.currentMonth - 1
          }
          break
        case 'addYear':
          this.currentYear = this.currentYear + 1
          break
        default:
          if (this.currentMonth === 12) {
            this.currentYear = this.currentYear + 1
            this.currentMonth = 1
          } else {
            this.currentMonth = this.currentMonth + 1
          }
      }
    },
    addSchedule() {
      this.newScheduleShow = true
    },
  }
}
</script>

<style lang="scss" scoped>
.scheduling-wrapper {
  height: calc(100% - 42px);
  background: var(--system-page-content-bgc);
  border-radius: 6px;
  position: relative;
  padding-top: 66px;

  .currentDay {
    position: absolute;
    top: 24px;
    right: 20px;
    height: 48px;

    h1 {
      display: inline-block;
      font-weight: normal;
    }

    .icon {
      cursor: pointer;
    }

  }

  .schedulingTitle-wrapper {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 560px;
    background-color: #fff;
    padding-top: 24px;

    h1 {
      pointer-events: none;

      &::after {
        display: inline-block;
        content: '\e6aa';
        font-family: "iconfont";
        transform: rotate(90deg);
        cursor: pointer;
        pointer-events: auto;
      }
    }

    .condition-wrapper {
      padding-bottom: 24px;

      .el-input {
        width: 200px;
        margin-right: 12px;
      }
    }


    &.active {
      border: 1px solid #ccc;

      h1::after {
        transform: rotate(-90deg);
      }
    }
  }

  .calendar-wrapper {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: repeat(7, 14.28%);
    grid-template-rows: 48px repeat(6, auto);

    div {
      border: 1px solid #dedede;
      text-align: right;
      position: relative;


      &.week {
        border: none;
        text-align: center;
      }

      &.lastMonthDay, &.nextMonthDay {
        background-color: #f5f5f5;

        span {
          color: #d4d4d4;
        }
      }

      &:not(:nth-child(7n+1)) {
        margin-left: -1px;
      }

      &:nth-child(n+8) {
        margin-top: -1px;
      }

      .date {
        position: absolute;
        right: 16px;
        top: 16px;
      }

      .scheduleStatus {
        position: absolute;
        left: 16px;
        bottom: 16px;
      }

      .businessButtonCancel {
        position: absolute;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
      }

      .iconbiaoge-shanchu {
        position: absolute;
        right: 16px;
        bottom: 16px;
        color: red;
        cursor: pointer;
      }
    }
  }

  .businessDialog .dialog-body {
    padding: 0;

    .row {
      display: inline-flex;
      width: 100%;
      border-bottom: 1px solid #efefef;
      position: relative;

      .systemButtonDelete {
        position: absolute;
        bottom: 10px;
        right: 45px;
      }

      .order {
        width: 80px;
        border-right: 1px solid #efefef;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        color: #0080ff;
      }

      .scheduleDetail {
        padding: 26px 45px;
        width: 100%;
      }
    }
  }
}
</style>

